import QtQuick 2.15
import QtQuick.Controls 2.15
import QtCharts 2.15

SubView1 {
    id: root
    width: 532
    height: 349
    property date chartStartTime
    signal signalStart
    signal signalStop
    signal signalClear
    property real maxY:5
    property real minY:0
    property real maxX:5
    property real minX:0
    Rectangle
    {
        id:displayPanel
        x: 1
        y: 8
        width: 531
        height: 340
        color:"transparent"
        border.color: "white"
        Button
        {
            id:btnSetZero
            x: 423
            y: 10
            width: 100
            height: 36
            background: Rectangle{
                border.width: 0
                color: "#7584C2"
                    }

            text: qsTr("清除")
            font.pixelSize: 25
            palette.buttonText: "white"
            onClicked: {
                signalClear()
            }
            z:10
        }
        ChartView {
                    id:chartView
                    backgroundColor: "transparent"
                    titleColor: "white"
//                    titleFont.pixelSize: 15
//                    titleFont.bold: true
                    //anchors.fill:parent
                    //titleColor: Theme.darker(1.2)
                    width: displayPanel.width
                    height:displayPanel.height
                    legend.visible: false
                    //color
                    //antialiasing: true
                    //X轴
                    ValueAxis {
                        id: valueAxisX
                        min: minX
                        max: maxX
                        tickCount: 5  //坐标轴上的的刻度个数。所以间隔 = 60 / 30 = 2
                        labelFormat: "%.0f"//0 - 控制小数点后有几位小数
                        color: "gray"
                        labelsColor: "white"
                        gridVisible: false
                    }
                    //Y轴
                    ValueAxis {
                        id: valueAxisY
                        min: minY
                        max: maxY
                        //tickCount: 10  //坐标轴上的的刻度个数
                        //labelFormat: "%.1f"//1 - 控制小数点后有几位小数
                        color: "gray"
                        labelsColor: "white"
                        gridVisible: false
                    }
                    //LineSeries是折线，SplineSeries是曲线。子项都是XYPoint
                    SplineSeries {
                        id:line1
                        name: "重量"  //线条的名称
                        axisX: valueAxisX  //指定X轴
                        axisY: valueAxisY  //指定Y轴
                        color: "white"
                        width: 2//线的宽度，但修改线宽后，需要重新设置color，否则修改过width的线条都是黑色
                        pointLabelsVisible: false
                    }
                }
        Timer{
                id:chartTimer
                function timeChanged() {

                    var weight =mymodbus.weightNew
                    var x=(new Date() - chartStartTime)/1000
                    if(Math.ceil(weight)>maxY)
                    {
                        maxY =Math.ceil(weight)+5
                    }
                    if(Math.floor(weight)<minY){
                        minY=Math.floor(weight)-5
                    }
                    if(x>maxX)
                    {
                        maxX=x+1;
                    }
                    valueAxisY.min =minY
                    valueAxisY.max =maxY
                    valueAxisX.max =maxX
                    line1.append(x,weight)
                }
                interval: 200;
                running:false;
                repeat: true;
                onTriggered: timeChanged();
            }
    }
    onSignalStart: {
        chartTimer.start()
    }
    onSignalStop: {
        chartTimer.stop()
    }
    onSignalClear: {
        minX=0
        minY=0
        maxX=5
        maxY=5
        valueAxisY.min =minY
        valueAxisY.max =maxY
        valueAxisX.min =minX
        valueAxisX.max =maxX
        this.chartStartTime=new Date()
        line1.clear()
    }
}

